import React from 'react';
import {TabNavigator, TabBarBottom} from 'react-navigation';

import Icon from 'react-native-vector-icons/MaterialIcons'

import HomeScreen from '../screens/HomeScreen';
import Dummy from '../components/Dummy';
import UserStack from './UserStack';

export default TabNavigator({
    'Home': {
      screen: HomeScreen,
      navigationOptions: {
        tabBarIcon: ({focused, tintColor}) => {
          let iconName;
          if (focused) {
            iconName = 'ac-unit';
          } else {
            iconName = 'apps';
          }
          return <Icon name={iconName} size={25} color={tintColor} />;
        }
      }
    },
    'Dummy': {
        screen: Dummy,
        navigationOptions: {
          tabBarIcon: ({focused, tintColor}) => {
            let iconName = 'blur-on';
            return <Icon name={iconName} size={25} color={tintColor} />;
          }
        }
      },
    'User': {
      screen: UserStack,
      navigationOptions: {
        tabBarIcon: ({focused, tintColor}) => {
          let iconName = 'directions-run';
          return <Icon name={iconName} size={25} color={tintColor} />;
        }
      }
    },
  }, {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
  });